<extend name="Public:company_center"/>

<block name="right_main">
<style>
	.icon-job-post-step {
		background-size: 965px 31px;
		background-repeat: no-repeat;
		background-position: 25% 0;
		width: 965px;
		height: 31px;
		margin: 0 auto;
	}
</style>
	<div class="col-xs-15 col-md-10 wei-user-admin-content">
		<style type="text/css">
			select {
				width: 220px;
				border: 1px solid #cccccc;
				background-color: #ffffff;
			}
			.icon-job-post-step.step-1 {
				background-image: url("__PUBLIC__/images/job_post_step_1.png");
			}
		</style>
		<h3 class="wei-user-admin-title-bar">职位分类</h3>

		<div class="icon-job-post-step step-1"></div>
		<form class="form-horizontal" id="form" method="get" action="{:U('Job/edit')}">
			<input type="hidden" id="cid" name="cid" value="">
			<input type="hidden" id="id" name="id" value="{$Think.get.id}">
			<div class="form-group"><label class="col-sm-2 control-label">职位分类&nbsp;<span>*</span></label>
				<div class="col-sm-10">
					<select size="10" id="category_1">
						<foreach name="list" item="v">
							<option value="{$v.id}">{$v.name}</option>
						</foreach>
					</select> &nbsp;
					<select size="10" id="category_2"></select> &nbsp;
					<select size="10" id="category_3"></select></div>
			</div>
			<div class="form-group"><label class="col-sm-2 control-label">已选定分类</label>

				<div class="col-sm-10">
					<label class="checkbox" style="padding-left:0px;">
						<span id="category_name">
							<span>未选定</span>
						</span>
					</label>
				</div>
			</div>
			<div class="form-group"><label class="col-sm-2 control-label">&nbsp;</label>

				<div class="col-sm-10">
					<button type="submit" class="btn btn-primary">选定分类</button>
					&nbsp;
					<button type="button" class="btn btn-default" onclick="history.go(-1)">取消</button>
				</div>
			</div>
		</form>
		<script>
			seajs.use(['$'], function ($) {
				var cates = {};
				$.ajax({
					url : "{:U('Job/getCate')}",
					datatype : "json",
					async : false,
					success : function (data) {
						if ( data ) {
							cates = data;
						}
					}
				})
				$("#category_1").change(function () {
					$("#category_2").find("option").remove();
					$("#category_3").find("option").remove();
					for (var i = 0; i < cates.length; i++) {
						if ( cates[i].id == $(this).val() && cates[i].children.length > 0 ) {
							var cate_2 = cates[i].children;
							for (var j = 0; j < cate_2.length; j++) {
								$("#category_2").attr("data-pid", cate_2[j].pid);
								$("#category_2").append("<option value='" + cate_2[j].id + "'>" + cate_2[j].name + "</option>");
							}
						}
					}
				});
				$("#category_2").change(function () {
					$("#category_3").find("option").remove();
					for (var i = 0; i < cates.length; i++) {
						if ( cates[i].id == $(this).attr("data-pid") ) {
							var cate_2 = cates[i].children;
							for (var x = 0; x < cate_2.length; x++) {
								if ( $(this).val() == cate_2[x].id && cate_2[x].children.length > 0 ) {
									var cate_3 = cate_2[x].children;
									for (var j = 0; j < cate_3.length; j++) {
										$("#category_3").attr("data-pid", cate_3[j].pid);
										$("#category_3").append("<option value='" + cate_3[j].id + "'>" + cate_3[j].name + "</option>");
									}
								}
							}

						}
					}
				})
				$("#category_3").change(function () {
					$("input#cid").val($(this).val());
					var txt = $(this).find("option:selected").text();
					$("#category_name").html('<span class="label label-danger">' + txt + '</span>');
				})
				$("form#form").submit(function () {
					if ( !$("input#cid").val() ) {
						alert("请选择分类");
						return false;
					}
				})
			});
		</script>
	</div>
</block>